<template>
<div>
<a-form :form="form" @submit.prevent="onSubmit">
      <div class="header">
          <h3>一、基本信息</h3>
          <div class="operate">
              <transition name="slide-fade">
                  <a-button type="primary" @click="returned" v-show="!disabled">还原默认</a-button>
              </transition>
              <a-button type="primary" v-if="disabled && is_admin == 1" @click="edit">修改</a-button>
              <a-button type="primary" @click="onSubmit" v-if="!disabled && is_admin == 1">保存修改</a-button>
          </div>
      </div>
      <a-row :gutter='10' class="form-main-content">
            <a-col :key="0" :span="8" class="form-item">
                <a-form-item  label="编号">
                {{data.id}}
                </a-form-item>
            </a-col>
            <a-col :key="1" :span="8" class="form-item">
                <a-form-item  label="设备型号">
                  <a-input placeholder="请输入设备型号" v-decorator="['name']" v-if="!disabled"/>
                  <div  v-if="disabled">{{data.name}}</div>
                </a-form-item>
            </a-col>
            <a-col :key="2" :span="8" class="form-item">
                <a-form-item  label="设备类型">
                    <a-select v-decorator="['status',{initialValue:0},{rules: [{ required: true, message: '请选择设备类型' }]}]" placeholder="请选择设备类型" v-if="!disabled">
                      <a-select-option v-for="(v,k) in types" :key="k" :value="k">
                        {{v.name}}
                      </a-select-option>
                    </a-select>
                  <div  v-if="disabled">{{data.type}}</div>
                </a-form-item>
            </a-col>
            <a-col :key="3" :span="8" class="form-item">
                <a-form-item label="备注">
                  <a-textarea rows="4" placeholder="请输入备注" v-decorator="['remark']" v-if="!disabled"/>
                  <div  v-if="disabled">{{data.remark}}</div>
                </a-form-item>
            </a-col>
      </a-row>
      
      
</a-form>
</div>
</template>




<script>
    export default {
    	data(){
    		return {
          id:0,
          form: this.$form.createForm(this),
          disabled:true,
          types:[],
          data:[],
    		}
    	},
    	
    	methods: {
          onSubmit(form){
            this.form.validateFields((err, values) => {
              if(!err){
                this.postData(values).then(res=>{
                    if(res.id){
                      this.$message.success(res.msg);
                      this.$router.push('/devicemodel')
                    }else{
                      this.$message.error(res.msg);
                    }
                })
              
              }
            })
          
        },
        edit(){
          this.disabled = false
          setTimeout(()=>{this.form.setFieldsValue(this.data)},200)
           
        },
        returned(){
          this.form.setFieldsValue(this.data)
        },
        async postData(param){
          let data = await this.http('put','devicemodel/update?id='+this.id,param);
          return data;
        },
        async getDetail(id){
          let data = await this.http('get','devicemodel/view',{id:id});
          return data;
        }
    	},
      mounted(){
        this.id = this.$route.params.id
        this.getDetail(this.id).then(res=>{
          
          this.data = res.data
          this.types = res.types
        })
      }
    
 }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
@import "../../assets/scss/mixin";
    .header {
        @include fj();
        margin-bottom: 30px;
        .operate {
            .ant-btn + .ant-btn {
                margin-left: 40px;
            }
        }
    }

    .slide-fade-enter-active {
        transition: all .3s ease;
    }
    .slide-fade-leave-active {
        transition: all .3s ease;
    }
    .slide-fade-enter, .slide-fade-leave-to {
        transform: translateX(20px);
        opacity: 0;
    }
</style>
